<template>
    <div>
    <ul>
        <li v-for="message in messages" :key="message.id">
           <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
            <button @click="pushShow(message.id)">Push查看</button>
            <button @click="replaceShow(message.id)">Replace查看</button>
        </li>
    </ul>
        <button @click="$router.back()">回退</button>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Message",
        data(){
            return {
                messages:[]
            }
        },
        methods:{
          pushShow(id){
              this.$router.push(`/home/message/detail/${id}`)
          },
          replaceShow(id){
              this.$router.replace(`/home/message/detail/${id}`)
          }
        },
        mounted() {
           setTimeout(()=>{
               const messages = [
                   {id:1,title:'msg1'},
                   {id:2,title:'msg2'},
                   {id:3,title:'msg3'}
                   ];
               this.messages = messages;
           },1000)
        }
    }
</script>

<style scoped>

</style>